<template>
  <div id="pictureDetailPage">
    <a-row :gutter="[16, 16]">
      <!--      图片预览-->
      <a-col :sm="24" :md="16" :xl="18">
        <a-card title="图片预览">
          <a-image :src="picture.url" style="max-height: 600px; object-fit: contain" />
        </a-card>
      </a-col>
      <!--      图片信息-->
      <a-col :sm="24" :md="8" :xl="6">
        <a-card title="图片信息">
          <a-descriptions :column="1">
            <a-descriptions-item label="作者">
              <a-space>
                <a-avatar :size="24" :src="picture.user?.userAvatar" />
                <div>
                  {{ picture.user?.userName }}
                </div>
              </a-space>
            </a-descriptions-item>
            <a-descriptions-item label="名称">
              {{ picture.name ?? '未命名' }}
            </a-descriptions-item>
            <a-descriptions-item label="简介">
              {{ picture.introduction ?? '暂无简介' }}
            </a-descriptions-item>
            <a-descriptions-item label="分类">
              {{ picture.category ?? '默认' }}
            </a-descriptions-item>
            <a-descriptions-item label="标签">
              <!-- 使用 computed 处理后的 tags 数据 -->
              <a-tag v-for="tag in parsedTags" :key="tag" color="blue">
                {{ tag }}
              </a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="格式">
              {{ picture.picFormat ?? '未知格式' }}
            </a-descriptions-item>
            <a-descriptions-item label="宽度">
              {{ picture.picWidth ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="高度">
              {{ picture.picHeight ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="宽高比">
              {{ picture.picScale ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="大小">
              {{ formatSize(picture.picSize) }}
            </a-descriptions-item>
          </a-descriptions>
          <!--图片操作 -->
          <a-space wrap>
            <a-button type="primary" @click="doDownload">
              免费下载
              <template #icon>
                <DownloadOutlined />
              </template>
            </a-button>
            <a-button v-if="canEdit" :icon="h(EditOutlined)" type="default" @click="doEdit">
              编辑
            </a-button>
            <a-popconfirm
              title="你确认要删除这张图片吗？"
              ok-text="是"
              cancel-text="否"
              @confirm="doDelete"
            >
              <a-button v-if="canEdit" :icon="h(DeleteOutlined)" danger> 删除 </a-button>
            </a-popconfirm>
          </a-space>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed, h } from 'vue'
import { deletePictureUsingPost, getPictureVoByIdUsingGet } from '@/api/pictureController.ts'
import { message } from 'ant-design-vue'
import { downloadImage, formatSize } from '@/utils'
import { DeleteOutlined, EditOutlined, DownloadOutlined } from '@ant-design/icons-vue'
import { useLoginUserStore } from '@/stores/useLoginUserStore.ts'
import { useRouter } from 'vue-router'

interface Props {
  id: string | number
}

const props = defineProps<Props>()
const picture = ref<API.PictureVO>({})
const loginUserStore = useLoginUserStore()

// 确认是否具有编辑权限
const canEdit = computed(() => {
  const loginUser = loginUserStore.loginUser
  //未登录不能编辑
  if (!loginUser) {
    message.error('请先登录')
    return false
  }
  //仅本人和管理员可以编辑
  const user = picture.value.user || {}
  return loginUser.id === user.id || loginUser.userRole === 'admin'
})

// 获取图片详情
const fetchPictureDetail = async () => {
  try {
    const res = await getPictureVoByIdUsingGet({
      id: props.id,
    })
    if (res.data.code === 0 && res.data.data) {
      console.log('获取图片详情成功', res.data.data)
      picture.value = res.data.data
    } else {
      message.error('获取图片详情失败' + res.data.message)
    }
  } catch (e: any) {
    message.error('获取图片详情失败' + e.data.message)
  }
}

// 计算属性，将 tags 字符串解析为数组
const parsedTags = computed(() => {
  try {
    if (typeof picture.value.tags === 'string') {
      return JSON.parse(picture.value.tags)
    }
    return picture.value.tags || []
  } catch (error) {
    console.error('解析 tags 失败:', error)
    return []
  }
})
const router = useRouter()
//编辑
const doEdit = () => {
  router.push({
    path: '/add_picture',
    query: {
      id: picture.value.id,
      spaceId: picture.value.spaceId,
    },
  })
}

//删除
const doDelete = async () => {
  const id = picture.value.id
  if (!id) {
    return
  }

  const res = await deletePictureUsingPost({ id })
  if (res.data.code === 0) {
    message.success('删除成功')
    router.push(`/`)
  } else {
    message.error('删除失败' + res.data.message)
  }
}

onMounted(() => {
  fetchPictureDetail()
})

// 下载
const doDownload = () => {
  downloadImage(picture.value.url)
}
</script>
<style scoped>
#pictureDetailPage {
  margin-bottom: 16px;
}
</style>
